<template>
  <div id="lsdd-create">
    <div style="padding-top: 10px"></div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <el-form
          label-position="right"
          label-width="110px"
          ref="formLabelAlign"
          :model="formLabelAlign"
          :rules="rules"
          ><!-- :inline="true":自动多行处理 -->
          <el-form-item prop="ordersId">
            <el-input v-if="false" v-model="formLabelAlign.ordersId"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="ordersDate">
            <el-date-picker
              style="width: 100%"
              v-model="formLabelAlign.ordersDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单金额" prop="ordersAmount">
            <el-input-number
              :min="0"
              placeholder="请输入订单金额"
              v-model="formLabelAlign.ordersAmount"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="送货地址" prop="shippingAddress">
            <el-input
              placeholder="请输入送货地址"
              v-model="formLabelAlign.shippingAddress"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="orderStatus">
            <el-select
              style="width: 100%"
              v-model="formLabelAlign.orderStatus"
              placeholder="请选择订单状态"
            >
              <el-option
                v-for="item in [
                  { name: '未付款' },
                  { name: '已付款' },
                  { name: '已发货' },
                  { name: '已收货' },
                  { name: '已退货' },
                ]"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="false" prop="customerId">
            <el-input v-model="formLabelAlign.customerId"></el-input>
          </el-form-item>

          <div style="padding-top: 10px"></div>
          <el-form-item>
            <el-button
              type="primary"
              :round="true"
              @click="submitForm('formLabelAlign')"
              style="width: 20vw"
            >
              立即创建
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        ordersId: null,
        ordersDate: "", //日期
        ordersAmount: "", //订单金额
        shippingAddress: "", //送货地址
        orderStatus: "", //订单状态
        customerId: "", //客户编号
      },
      rules: {
        ordersDate: [{ required: true, message: "请输入日期!" }],
        ordersAmount: [{ required: true, message: "请输入订单金额!" }],
        shippingAddress: [{ required: true, message: "请输入送货地址!" }],
        orderStatus: [{ required: true, message: "请输入订单状态!" }],
        customerId: [{ required: true, message: "请输入客户编号!" }],
      },
    };
  },
  created: function () {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "post",
            crossdomain: true,
            url: "/sale-chance/add",
            data: this.$qs.stringify(this.formLabelAlign),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              this.$notify({
                title: "添加成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              //   this.$router.replace({ path: "/" });
              this.formLabelAlign = {
                ordersId: null,
                ordersDate: "", //日期
                ordersAmount: "", //订单金额
                shippingAddress: "", //送货地址
                orderStatus: "", //订单状态
                customerId: "", //客户编号
              };
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>
